﻿<template>
  <section class="cardBox">
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <div slot="header" v-if="showHeader">
        <slot name="header"></slot>
      </div>
      <div class="cardBox-row" v-if="direction == 'row'">
        <img
          :src="obj.cover_pic"
          v-if="obj.cover_pic"
          @click="handleRoute(obj)"
          :style="{ height: imgHeight }"
        />

        <div>
          <span>
            <slot name="name" :style="{ width: basicWidth }" :obj="obj">{{
              obj.name
            }}</slot>
          </span>
          <span v-if="showControl">
            <slot name="control" :obj="obj">
              <el-button
                v-if="obj.is_collection == 0"
                @click="handleControl(obj)"
                >收藏</el-button
              >
              <el-button v-else @click="handleControl(obj)">编辑</el-button>
            </slot>
          </span>
        </div>
      </div>
    </el-card>
  </section>
</template>

<script>
export default {
  name: "comCard",
  components: {},
  props: {
    showHeader: {
      type: Boolean,
      default: false,
    },
    showControl: {
      type: Boolean,
      default: true,
    },
    imgHeight: {
      type: String,
      default: "auto",
    }, 
    direction: {
      type: String,
      default: "row", //主轴方向 row||column
    },
    basicWidth: {
      type: String,
      default: "270px",
    },
    obj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  watch: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handleRoute(v) {
      this.$emit("path", v);
    },
    handleControl(v) {
      this.$emit("control", v);
    },
  },
};
</script>

<style scoped lang="less">
.cardBox {
  &-row {
    > img {
      width: 100%;
      cursor: pointer;
    }
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 66px;
      padding: 10px 22px;
      font-size: 14px;
      box-sizing: border-box;
      background-color: #fff;
      > span {
        &:nth-child(1) {
          color: #000;
        }
        &:nth-child(2) {
          display: flex;
          > button {
            height: 20px;
            margin-left: 10px;
            padding: 0 10px;
            box-sizing: border-box;
            line-height: 20px;
            font-size: 12px;
          }
        }
      }
    }
  }
  &-column {
    display: flex;
    > img {
      height: 100%;
      width: 100%;
      cursor: pointer;
    }
    > span {
      flex: 1;
      height: 100%;
    }
  }
}
</style>